<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<div class="content pb0">
	<!-- Info boxes -->
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-aqua"><i class="fa fa-cog"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">按期完成度 </span>
					<span class="info-box-number">90<small>%</small></span>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">完成订单总数</span>
					<span class="info-box-number">41,410</span>
				</div>
			</div>
		</div>

		<!-- fix for small devices only -->
		<div class="clearfix visible-sm-block"></div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-green"><i class="fa fa-internet-explorer"></i></span>
				<div class="info-box-content">
					<span class="info-box-text">排产等待队列信息</span>
					<span class="info-box-number">760</span>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 col-xs-12">
			<div class="info-box">
				<span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>

				<div class="info-box-content">
					<span class="info-box-text">新增合同签订数，待排产</span>
					<span class="info-box-number">2,000</span>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<div class="col-md-6">
					<!-- EChart 雷达 -->
					<div id="chart1" style="height: 600px;top: 30px;">
						<!--<script src="${ctxStatic}/echarts/4.2/echarts.simple.min.js"></script>-->
						<script>
							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '天海集团产能状况雷达图'
								},

								legend: {                        // 图例组件
									show: true,
									icon: 'rect',                   // 图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。
									top : '15%',                    // 图例距离顶部边距
									left : '15%',                   // 图例距离左侧边距
									itemWidth: 10,                  // 图例标记的图形宽度。[ default: 25 ]
									itemHeight: 10,                 // 图例标记的图形高度。[ default: 14 ]
									itemGap: 30,                	// 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
									// orient: 'vertical',             // 图例列表的布局朝向,'horizontal'为横向,''为纵向.
									textStyle: {                    // 图例的公用文本样式。
										fontSize: 15,
										color: '#fff'
									},
									data: [
										{name:'产能',textStyle:{color:'#0066FF'}},
										{name:'实际生产值',textStyle:{color:'#912BD5'}}
										]
								},

								radar: [{                       // 雷达图坐标系组件，只适用于雷达图。
									center: ['50%', '50%'],             // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
									radius: 160,                        // 圆的半径，数组的第一项是内半径，第二项是外半径。
									startAngle: 90,                     // 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
									name: {                             // (圆外的标签)雷达图每个指示器名称的配置项。
										formatter: '【{value}】',
										textStyle: {
											fontSize: 15,
											color: '#000'
										}
									},
									nameGap: 15,                        // 指示器名称和指示器轴的距离。[ default: 15 ]
									splitNumber: 5,                     // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
									shape: 'circle',                    // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
									axisLine: {                         // (圆内的几条直线)坐标轴轴线相关设置
										lineStyle: {
											color: '#fff',                   // 坐标轴线线的颜色。
											width: 1,                      	 // 坐标轴线线宽。
											type: 'solid'                  // 坐标轴线线的类型。
										}
									},
									splitLine: {                        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
										lineStyle: {
											color: '#fff',                       // 分隔线颜色
											width: 2							 // 分隔线线宽
										}
									},
									splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
										show: true,
										areaStyle: {                            // 分隔区域的样式设置。
											color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
										}
									},
									indicator: [{               // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
										name: '线束',                           // 指示器名称
										max: 15000                               // 指示器的最大值，可选，建议设置
										//color: '#fff'                           // 标签特定的颜色。
									}, {
										name: '研发',
										max: 10000
									}, {
										name: '流水线',
										max: 8000
									}, {
										name: '待停产',
										max: 2000
									}, {
										name: '新增待产',
										max: 500
									}]
								}],
								series: [{
									name: '天海产能分析雷达图',             // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
									type: 'radar',              // 系列类型: 雷达图
									itemStyle: {                // 折线拐点标志的样式。
										normal: {                   // 普通状态时的样式
											lineStyle: {
												width: 1
											},
											opacity: 0.2
										},
										emphasis: {                 // 高亮时的样式
											lineStyle: {
												width: 5
											},
											opacity: 1
										}
									},
									data: [{                    // 雷达图的数据是多变量（维度）的
										name: '实际生产值',                 // 数据项名称
										value: [11035, 6013, 5067, 1520, 184],        // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
										symbol: 'circle',                   // 单个数据标记的图形。
										symbolSize: 5,                      // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
										label: {                    // 单个拐点文本的样式设置
											normal: {
												show: true,             // 单个拐点文本的样式设置。[ default: false ]
												position: 'top',        // 标签的位置。[ default: top ]
												distance: 5,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
												color: 'rgba(255,0,0,1)',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
												fontSize: 14,           // 文字的字体大小
												formatter:function(params) {
													return params.value;
												}
											}
										},
										itemStyle: {                // 单个拐点标志的样式设置。
											normal: {
												borderColor: 'rgba(255,0,0,1)',       // 拐点的描边颜色。[ default: '#000' ]
												borderWidth: 3                       // 拐点的描边宽度，默认不描边。[ default: 0 ]
											}
										},
										lineStyle: {                // 单项线条样式。
											normal: {
												opacity: 0.5            // 图形透明度
											}
										},
										areaStyle: {                // 单项区域填充样式
											normal: {
												color: 'rgba(255,0,0,0.6)'       // 填充的颜色。[ default: "#000" ]
											}
										}
									}, {
										name: '产能',
										value: [13408, 5065, 5947, 856, 302],
										symbol: 'circle',
										symbolSize: 5,
										label: {
											normal: {
												show: true,
												position: 'top',
												distance: 5,
												color: 'rgba(51,0,255,1)',
												fontSize: 14,
												formatter:function(params) {
													return params.value;
												}
											}
										},
										itemStyle: {
											normal: {
												borderColor: 'rgba(51,0,255,1)',
												borderWidth: 3
											}
										},
										lineStyle: {
											normal: {
												opacity: 0.5
											}
										},
										areaStyle: {
											normal: {
												color: 'rgba(51,0,255,0.5)'
											}
										}
									}]
								}, ]
							};
							// 使用刚指定的配置项和数据显示图表

							var chart1 = echarts.init(document.getElementById("chart1"));
							chart1.setOption(option)
						</script>
					</div>
					</div>
					<div class="col-md-6">
						<!-- EChart 散点图 -->
						<div id="chart2" style="height: 600px;top: 30px;">
							<!--<script src="${ctxStatic}/echarts/4.2/echarts.simple.min.js"></script>-->
							<script>
								// 指定图表的配置项和数据
								var data = [
									[[28604,77,17096869,'部门1',"一季度"],[31163,77.4,27662440,'部门2',"一季度"],[1516,68,1154605773,'部门3',"一季度"],[13670,74.7,10582082,'部门4',"一季度"],[28599,75,4986705,'部门5',"一季度"],[29476,77.1,56943299,'部门7',"一季度"],[31476,75.4,78958237,'部门8',"一季度"],[28666,78.1,254830,'部门9',"一季度"],[1777,57.7,870601776,'部门6',"一季度"],[29550,79.1,122249285,'部门10',"一季度"]],
									[[44056,81.8,23968973,'部门1',"二季度"],[43294,81.7,78549927,'部门2',"二季度"],[19934,76.9,1376048943,'部门3',"二季度"],[21291,78.5,11389562,'部门4',"二季度"],[38923,80.8,5503457,'部门5',"二季度"],[56599,81.9,64395345,'部门7',"二季度"],[44053,81.1,80688545,'部门8',"二季度"],[42182,82.8,329425,'部门9',"二季度"],[5903,66.8,1311050527,'部门6',"二季度"],[36162,83.5,126573481,'部门10',"二季度"]],
									[[4246,55.8,15688973,'部门1',"三季度"],[12594,34.7,35939927,'部门2',"三季度"],[23334,45.9,356768943,'部门3',"三季度"],[14491,34.5,15689562,'部门4',"三季度"],[31823,23.8,5603457,'部门5',"三季度"],[89599,38.9,64395345,'部门7',"三季度"],[34053,89.1,56688545,'部门8',"三季度"],[34182,69.8,329425,'部门9',"三季度"],[6803,35.8,1111050527,'部门6',"三季度"],[45162,81.5,145573481,'部门10',"三季度"]],
									[[35056,34.8,4567973,'部门1',"四季度"],[21194,67.7,15349927,'部门2',"四季度"],[34334,67.9,5426048943,'部门3',"四季度"],[23491,66.5,18989562,'部门4',"四季度"],[23923,45.8,1503457,'部门5',"四季度"],[23599,44.9,54124345,'部门7',"四季度"],[56053,77.1,71258545,'部门8',"四季度"],[56182,67.8,329425,'部门9',"四季度"],[8103,45.8,1591050527,'部门6',"四季度"],[32162,47.5,199573481,'部门10',"四季度"]]
								];

                                var itemStyle = {
                                    normal: {
                                        opacity: 0.8,
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                };

								option = {
									// backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
									// 	offset: 0,
									// 	color: '#f7f8fa'
									// }, {
									// 	offset: 1,
									// 	color: '#cdd0d5'
									// }]),
									title: {
										text: '季度生产分布'
									},
									legend: {
										right: 10,
										data: ['一季度', '二季度','三季度','四季度']
									},
									xAxis: {
										splitLine: {
											lineStyle: {
												type: 'dashed'
											}
										}
									},
									yAxis: {
										splitLine: {
											lineStyle: {
												type: 'dashed'
											}
										},
										scale: true
									},
									series: [{
										name: '一季度',
										data: data[0],
										type: 'scatter',
										symbolSize: function (data) {
											return Math.sqrt(data[2]) / 5e2;
										},
										itemStyle: itemStyle
									}, {
										name: '二季度',
										data: data[1],
										type: 'scatter',
										symbolSize: function (data) {
											return Math.sqrt(data[2]) / 5e2;
										},
                                        itemStyle: itemStyle
									}, {
                                        name: '三季度',
                                        data: data[3],
                                        type: 'scatter',
                                        symbolSize: function (data) {
                                            return Math.sqrt(data[2]) / 5e2;
                                        },
                                        itemStyle: itemStyle
                                    }, {
                                        name: '四季度',
                                        data: data[3],
                                        type: 'scatter',
                                        symbolSize: function (data) {
                                            return Math.sqrt(data[2]) / 5e2;
                                        },
                                        itemStyle: itemStyle
                                    }]
								};
								// 使用刚指定的配置项和数据显示图表

								var chart2 = echarts.init(document.getElementById("chart2"));
								chart2.setOption(option)
							</script>
						</div>
					</div>
				</div>
			</div>
	</div>


	<div class="row">
	</div>


	<!-- Chart boxes -->
	<div class="row">
		<div class="col-md-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">本月度经济效益报告</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<div class="btn-group">
							<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-wrench"></i></button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">导出Excel</a></li>
								<li><a href="#">导出Word</a></li>
								<li class="divider"></li>
								<li><a href="#">基本设置</a></li>
							</ul>
						</div>
						<button type="button" class="btn btn-box-tool" data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-md-8">
							<div class="chart">
								<div id="myChart" style="height:230px;width:99%"></div>
								<!--<script src="${ctxStatic}/echarts/4.2/echarts.simple.min.js"></script>-->
								<script>
									var option = {
									    title : {
									        text: '2019-9'
									    },
									    tooltip : {
									        trigger: 'axis'
									    },
									    legend: {
									        data:['新增数量','在线生产实际','成交订单交付']
									    },
									    toolbox: {
									        show : true,
									        feature : {
									            mark : {show: true},
									            dataView : {show: true, readOnly: false},
									            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
									            restore : {show: true},
									            saveAsImage : {show: true}
									        }
									    },
									    calculable : true,
									    grid : {
									    	top: '49',
									    	right: '20',
									    	bottom: '30'
									    },
									    xAxis : [
									        {
									            type : 'category',
									            boundaryGap : false,
									            data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
									        }
									    ],
									    yAxis : [
									        {
									            type : 'value'
									        }
									    ],
									    series : [
									        {
									            name:'新增数量',
									            type:'line',
									            smooth:true,
									            itemStyle: {normal: {areaStyle: {type: 'default'}}},
									            data:[10, 12, 21, 54, 260, 830, 710,30, 182, 434, 791, 390, 30, 10,12, 21, 54, 260, 830, 710,30, 182, 434, 791, 390, 30, 10,43,54,55]
									        },
									        {
									            name:'在线生产实际',
									            type:'line',
									            smooth:true,
									            itemStyle: {normal: {areaStyle: {type: 'default'}}},
									            data:[30, 182, 434, 791, 390, 30, 10,601, 234, 120, 90, 20, 434, 791, 390, 30, 10,12, 21, 54, 260, 830, 710,30,20,43,54,55,182, 434]
									        },
									        {
									            name:'成交订单交付',
									            type:'line',
									            smooth:true,
									            itemStyle: {normal: {areaStyle: {type: 'default'}}},
									            data:[1320, 1132, 601, 234, 791, 390, 30, 10,601, 234, 120, 90, 20, 434, 791, 390,1132, 601, 234, 791, 390, 30, 10,601, 234, 120, 90, 20, 434, 791]
									        }
									     ]
									};
									// 基于准备好的dom，初始化echarts实例
							        var myChart = echarts.init(document.getElementById('myChart'));
							        myChart.setOption(option);
								</script>
							</div>
						</div>
						<div class="col-md-4">
							<p class="text-center">
								<strong>完成目标</strong>
							</p>
							<div class="progress-group">
								<span class="progress-text">按期完成点单</span>
								<span class="progress-number"><b>160</b>/200</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">加班赶工期完成数</span>
								<span class="progress-number"><b>310</b>/400</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-red" style="width: 80%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">缺料延期数量</span>
								<span class="progress-number"><b>480</b>/800</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-green" style="width: 80%"></div>
								</div>
							</div>
							<div class="progress-group">
								<span class="progress-text">新增库存排产订单</span>
								<span class="progress-number"><b>250</b>/500</span>
								<div class="progress sm">
									<div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="row">
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
								<h5 class="description-header">￥35,210.43(万)</h5>
								<span class="description-text">总营收</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
								<h5 class="description-header">￥20,390.90(万)</h5>
								<span class="description-text">总成本</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block border-right">
								<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
								<h5 class="description-header">￥4,813.53(万)</h5>
								<span class="description-text">总利润</span>
							</div>
						</div>
						<div class="col-sm-3 col-xs-6">
							<div class="description-block">
								<span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
								<h5 class="description-header">12000(万)</h5>
								<span class="description-text">目标完成</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<footer class="main-footer m0">
	<div class="pull-right hidden-xs">当前版本： ${@Global.getConfig('productVersion')}</div>
	&copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')} - Powered By <a href="http://www.thb.com.cn">天海环球智能管理平台研发团队</a>
</footer>
<% } %>
<script>
$(window).resize(function(){
	var footerHeight  = $('.main-footer').outerHeight() || 0;
	var windowHeight  = $(window).height();
	$('.content').css('min-height', windowHeight - footerHeight)
}).resize();
</script>
